<template>
    <div>
        <h1>员工管理</h1>
        <el-form :inline="true"  ref="searchRef"   :model="searchObj"  >
            <el-form-item label="id" prop="id">
                <el-input v-model="searchObj.id"  />
            </el-form-item>           
            <el-form-item>
                <el-button type="primary" @click="getStaffList">查询</el-button>
                <el-button type="primary" @click="resetSearch()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="staffList" style="width: 100%">
            <el-table-column prop="id" label="账号" width="180" />
            <el-table-column prop="name" label="真实姓名" width="180" />
            <el-table-column prop="shop" label="所属门店" />
            <el-table-column prop="tel" label="手机号" />
            <el-table-column prop="user_group" label="角色id" />
            <el-table-column prop="gname" label="角色" />
            <el-table-column prop="state" label="状态" />
            <el-table-column prop="lastTime" label="最后登录时间" />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <span>编辑</span> <span  @click="delStaff(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
// 导入api方法
import { GetStaffList,DelStaff} from '@/api/permission.js'
// 导入响应式创建方法
import { ref } from 'vue'
// 定义引用对象
const searchRef = ref();
// 定义搜索条件
var searchObj = ref({id:'',order:'asc'})
// 定义员工列表
var staffList = ref([]);
// 执行获取员工列表方法
getStaffList();
// 定义获取员工列表的方法（需要多次使用）
function getStaffList() {
    // 使用api方法
    GetStaffList(searchObj.value)
        .then(res => {
            if (res.data.code == 0) {
                staffList.value = res.data.data;
            } else {
                alert(res.data.msg || "员工列表获取失败")
            }

        })
}
// 重置
function resetSearch(){
    searchRef.value.resetFields()
    getStaffList();
}
// type导入不用
// import type { FormInstance, FormRules } from 'element-plus'
// 带泛型的去掉泛型<> 对象或数组的类型
// const ruleFormRef = ref<FormInstance>()   =>  const ruleFormRef = ref()
// 带类型的函数去掉类型  :代表参数的类型
/* 
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
=>    */  
/* 
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
*/  
function delStaff(row){
    // 正常情况应该会有个弹框
    DelStaff(row.id)
    .then(res=>{
        if(res.data.code==0){
            getStaffList() //重新获取员工列表
        }else{
            alert(res.data.msg)
        }
    })
}
</script>